import { Platform, StyleSheet } from "react-native";
import { BlurView } from "expo-blur";
import { useCallback } from "react";

export function useBottomTabOverflow() {
  return Platform.select({
    ios: 20,
    default: 0,
  });
}

export default function TabBarBackground() {
  const renderBackground = useCallback(() => {
    if (Platform.OS === "ios") {
      return <BlurView intensity={100} style={StyleSheet.absoluteFill} />;
    }
    return null;
  }, []);

  return renderBackground();
}
